<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script type="text/javascript">
    window.onload = function(){
      let user = document.getElementById('user');
      let pass = document.getElementById('pass');
      let btn1 = document.getElementById('btn1');
      let f1 = document.getElementById('files');
      //f1.value 是文件的路径  f1.files 才是文件对象。
      btn1.onclick = function(){
        let form  = new FormData();
        form.append('user',user.value);
        form.append('pass',pass.value);
        Array.from(f1.files).forEach(item=>{
          form.append('f1',item);
        });
        let xhr = new XMLHttpRequest();
        xhr.open('post','http://localhost:8080/api',true);
        xhr.send(form);
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4){
              if(xhr.status>=200&&xhr.status<300 || xhr.status==304){
                alert('成功了');
              }else{
                alert('失败了');
              }
            }
        }
      }
    }
  </script>
</head>
<body>
用户名：<input type="text" id='user'/><br>
密码：<input type="password" id="pass"><br>
    <input type="file" name='f1' id='files' multiple><br>
    <input type="button" id='btn1' value="提交">
</body>
</html>
